<template>
    <div style="overflow-x: hidden">
        <div class="home-header">
            <div class="home-header-left" style="display: flex; align-items: center;">
                <img style="width: 26px;display: inline-block; margin-right: 5px;" src="../assets/gonggao.jpg" alt=""><span style="color: #FF8E00;">{{formData.sys_notice}}</span>
            </div>
            <div class="home-header-center">
            </div>
            <div class="home-header-right">
                <el-button icon="el-icon-refresh" circle :loading="loading" @click="refresh" style="margin-right: 10px;"></el-button>
                <el-dropdown trigger="click" style="margin-right: 20px;" @command="handleCommand">
              <span class="el-dropdown-link">
                {{user.nickName}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="layout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!--        <span class="userName">当前登录：{{user.nickName}}</span>-->
                <!--          <el-button-group>-->
                <!--              <el-button plain @click="exit">退出</el-button>-->
                <!--              <el-button plain @click="refresh" :loading="loading">刷新</el-button>-->
                <!--          </el-button-group>-->
            </div>
        </div>
        <el-row :gutter="20" style="padding: 10px;">
            <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="4" v-for="(item, index) in clientListData" style="margin-bottom: 10px;" :key="index">
                <el-card :body-style="{ padding: '0px' }" shadow="always">
                    <div class="imgBox">
                        <a href="#">
                            <div class="img">
                                <img :src="logoUrl + item.logo" class="image" alt="封面图" @click="toEnter(item)" style="cursor: pointer;" onerror="this.classList.add('error');">
                                <div class="text">
                                    <h4>
                                        <span style="font-size: 15px;color: #88ad8c;" v-if="item.hasPermission">立即使用</span>
                                        <span v-else><span style="font-size: 15px;color: #ad1f38;">已到期,请续费</span></span>
                                    </h4>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div style="padding: 14px;">
                        <div class="bottom clearfix">
                            <div style="line-height: 20px; display: flex">
                                <time class="time" style="flex: 1;">使用时间：
                                    <span v-if="item.hasPermission"><font color="#67C23A">{{item.activeTime}}——{{item.expireTime}}</font></span>
                                    <span v-else><span style="color: red; font-size: 15px">已到期,请续费</span></span>
                                </time>
                                <i :class="[item.hasPermission? 'el-icon-circle-check': 'el-icon-circle-close']"></i>
                            </div>
                            <div style="display: flex; line-height: 20px;">
                                <time class="time" style="flex: 1; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">站点：US. CA. MX .JP. UK. DE. FR. ES. IT. IN</time>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div class="block">
<!--            <el-pagination-->
<!--                    style="float: right; margin: 10px;"-->
<!--                    @size-change="handleSizeChange"-->
<!--                    @current-change="handleCurrentChange"-->
<!--                    :current-page="pagination.pageIndex"-->
<!--                    :page-sizes="[10, 20, 50, 100]"-->
<!--                    :page-size="pagination.pageSize"-->
<!--                    layout="total, sizes, prev, pager, next, jumper"-->
<!--                    :total="pagination.total">-->
<!--            </el-pagination>-->
        </div>
        <div class="bottom-box">
            <div style="display: flex; align-items: center; line-height: 20px;">
                <span>
                    交流客服：
                </span>
                <img style="width: 90px;height: 90px" :src="logoUrl +'/'+ formData.sys_post_sale_group_qr" >
            </div>
            <div style="display: flex; align-items: center; line-height: 20px;">
                <span>
                    微信交流群：
                </span>
                <img style="width: 90px;height: 90px" :src="logoUrl +'/'+ formData.sys_communication_wechat_group_qr" >
            </div>
            <div style="display: flex; align-items: center; line-height: 20px;">
                <span>
                    QQ交流群：
                </span>
                <img style="width: 90px;height: 90px" :src="logoUrl +'/'+ formData.sys_communication_qq_group_qr" >
            </div>
<!--            <div class="bottom-left-box">-->
<!--                <div class="left-icon">-->
<!--                    <i class="el-icon-suitcase"></i>-->
<!--                </div>-->
<!--                <div>-->
<!--                    <div>JS网页售后群：{{formData.sys_post_sale_group_01}}</div>-->
<!--                    <div>JS插件售后群：{{formData.sys_post_sale_group_02}}</div>-->
<!--                </div>-->
<!--                <div style="margin-left: 20px;">-->
<!--                    <div>魔词售后群：{{formData.sys_post_sale_group_03}}</div>-->
<!--                    <div>交流群：{{formData.sys_post_sale_group_04}}</div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</template>

<script>
  const ipc = window.require('electron').ipcRenderer;
  const config = require('../../config/config');
  const targetUrl = config.SERVER.HOST;
  import dayjs from 'dayjs'
  export default {
    name: 'Home',
    components: {},
    data () {
      return {
        logoUrl: targetUrl,
        clientListData: [],
        token: '',
        id: '',
        user: {},
        enterList: [],
        loading: false,
        activeNames: ['1'],
        pagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        },
        formData: {
          sys_notice: '', //公告
          sys_post_sale_commissioner: '', //售后
          sys_post_sale_group_01: '', //售后群1
          sys_post_sale_group_02: '', //售后群2
          sys_post_sale_group_03: '', //售后群3
          sys_post_sale_group_04: '',//售后群4
          sys_communication_wechat_group_qr: '',//微信交流群
          sys_communication_qq_group_qr: '',//qq交流群
          sys_post_sale_group_qr: '',//售后/续费客服
          sys_post_sale_commissioner_wechat_qr: '',//充值客服
        },
      }
    },
    created () {
      this.getInfo()
      this.getClientInfo()
    },
    methods: {
      handleCommand (command) {
        switch (command) {
          case 'layout':
            this.exit()
        }
      },
      handleSizeChange (val) {
        this.pagination.pageSize = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.pagination.pageIndex = val
        this.getList()
      },
      exit () {
        let token = this.token
        this.$http({
          method: 'GET',
          url: `${targetUrl}/logout`,
          headers: {
            'Content-Type': 'application/json',
            'X-User-System-ID': 'CLIENT_USER',
            'Authorization': 'Bearer ' + token
          }
        }).then((res) => {
          window.localStorage.setItem('token', '')
          this.$router.push('/')
        })
      },
      refresh () {
        this.getInfo()
      },
      getList () {
        let {id} = this.user
        let token = this.token
        let that = this
        this.loading = true
        this.$http({
          method: 'GET',
          url: `${targetUrl}/client-products/CLIENT/${id}`,
          headers: {
            'Content-Type': 'application/json',
            'X-User-System-ID': 'CLIENT_USER',
            'Authorization': 'Bearer ' + token
          }
        }).then((res) => {
          setTimeout(() => {
            this.loading = false
          }, 500)
            let {code, rows, total} = res.data
            ///////////////
          // let tmpRows = rows[0];
          // rows = [];
          // rows[0] = tmpRows;
          // console.log(`rows:${JSON.stringify(rows)}`)
            /////////////////
          if (code === 200) {
            that.clientListData = rows.map(item =>{
              return {
                ...item,
                activeTime:dayjs(item.activeTime).format('YYYY-MM-DD'),
                expireTime: dayjs(item.expireTime).format('YYYY-MM-DD'),
              }
            })
            let arr = []
            for (let i = 0; i < that.clientListData.length; i++) {
              arr.push(i)
            }
            this.pagination.total = total
            that.activeNames = arr
            that.$nextTick(() => {
              // console.log(that.clientListData, rows, '===----')
            })
          }

        }).catch(() => {
          this.loading = false
        });
      },
      getInfo () {
        let token = localStorage.getItem('token') || ''
        token = JSON.parse(token)
        this.token = token
        this.$http({
          method: 'GET',
          url: targetUrl + '/client/getInfo',
          headers: {
            'Content-Type': 'application/json',
            'X-User-System-ID': 'CLIENT_USER',
            'Authorization': 'Bearer ' + token
          }
        }).then(res1 => {
          let {code, user} = res1.data
          if (code === 200) {
            this.user = user
            this.getList()
            // console.log(user)
          }
        })
      },
      //点击进入
      toEnter (item) {
        let _that = this
        let token = localStorage.getItem('token') || ''
        let clientUserId = this.user.id
        token = JSON.parse(token)
        this.token = token
        let {id, hasPermission} = item
        if (hasPermission) {
          this.$http({
            method: 'GET',
            url: `${targetUrl}/client-product-users/${id}`,
            headers: {
              'Content-Type': 'application/json',
              'X-User-System-ID': 'CLIENT_USER',
              'Authorization': 'Bearer ' + token
            }
          }).then(res1 => {
            let {code, data} = res1.data
            if (code === 200) {
              /* let parms = {
                 clientUserId: clientUserId, //当前登录用户ID
                 productId: item.id, //当前进入产品ID
                 productUserId: data.id, //当前内置账户ID
                 cookie: data.cookie, //当前进入产品cooike
                 url: item.url //地址
               }*/
              let cookieStr = data.cookie;
              let targetUrl;
              if (item.url.indexOf('https://') !== -1) {
                targetUrl = item.url
              } else {
                targetUrl = `http://${item.url}`
              }

              _that.enterList.push({productId: data.productId, productUserId: data.id})
              _that.$nextTick(() => {
                ipc.send('news', {
                  cookie: cookieStr,
                  url: targetUrl,
                  token: token,
                  payload: {
                    clientUserId,
                    productId: data.productId,
                    productUserId: data.id,
                    // product2UserRelationEntries: _that.enterList
                  },
                  userName: data.username,
                  passWord: data.password,
                  productUserId: data.id,
                  loginUser: this.user.nickName,
                  expireTime: item.expireTime,
                  productId: item.id
                });
              })

            }
          })
        }
      },
      getClientInfo (){
        let token = localStorage.getItem('token') || ''
        token = JSON.parse(token)
        this.$http({
          method: 'GET',
          url: targetUrl + '/maintenance-infos',
          headers: {
            'Content-Type': 'application/json',
            'X-User-System-ID': 'CLIENT_USER',
            'Authorization': 'Bearer ' + token
          }
        }).then(res => {
          let {code, data} = res.data
          if (code === 200) {
            for (let key in this.formData) {
              if(this.formData.hasOwnProperty(key)) {
                let itemBean = data.find(item => item.key === key)
                this.formData[key] = (itemBean && itemBean.value) || ''
              }
            }
            // console.log(user)
          }
        })
      }
    }
  }
</script>

<style scoped>

    .home-header {
        height: 60px;
        display: flex;
        padding: 0 0 0 10px;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    }

    .home-header .home-header-left {
        line-height: 60px;
        height: 60px;
        /*width: 100px;*/
        /*background: url("../assets/logo.png") no-repeat center center;*/
        background-size: contain;
    }

    .home-header .home-header-center {
        flex: 1;
        height: 60px;
        text-align: center;
        line-height: 60px;
    }

    .home-header .home-header-right {
        height: 60px;
        /*width: 360px;*/
        display: flex;
        align-items: center;
    }

    .home-header .home-header-right .userName {
        width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .home-header-right i {
        font-size: 16px;
        font-style: normal;
        color: #4a8cef;
        margin: 0 6px;
    }

    .home-content {
        height: calc(100vh - 60px);
        overflow: auto;
        overflow-x: hidden;
    }

    /*.home-content*/
    .home-content-item {
        /*height: 120px;*/
        background-color: #e7edf3;
        /*margin: 20px 0;*/
        display: flex;
    }

    .home-content-item .home-content-item-left {
        width: 220px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .home-content-item-left img {
        width: 120px;
        height: 72px;
    }

    .home-content-item-left span {
        flex: 1;
        font-size: 16px;
    }

    .home-content-item .home-content-item-center {
        flex: 1;
        height: 120px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding-left: 30px;
    }

    .home-content-item-center p {
        margin: 10px 0;
        font-size: 18px;
    }

    .home-content-item-center p i {
        font-style: normal;
        padding-left: 30px;
    }

    .home-content-item .home-content-item-right {
        display: flex;
        align-items: center;
        /*width: 100px;*/
        /*height: 120px;*/
        /*display: flex;*/
    }

    /*.home-content-item-right /deep/ .el-button {*/
    /*width: 60px;*/
    /*height: 30px;*/
    /*margin: 45px auto;*/
    /*border-radius: 15px;*/
    /*border: 1px solid #4a8cef;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*position: relative;*/
    /*cursor: pointer;*/
    /*}*/

    .home-content-item-right div::after {
        content: "";
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 20px;
        background-color: #4a8cef;
    }

    .home-content-item-right div span {
        font-size: 12px;
        padding-right: 10px;
        color: #4a8cef;
    }

    .home-content-item-right div i {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid #4a8cef;
    }

    .divWarp {
        border: 1px solid #8c939d !important;
    }

    .divWarp::after {
        content: "";
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 20px;
        background-color: #8c939d !important;
    }

    .toEnters {
        color: #8c939d !important;
    }

    .icon {
        border-top: 10px solid #8c939d !important;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        height: auto;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409eff;
    }

    .block {
        width: 100%;
        overflow: hidden;
        margin-bottom: 100px;
    }

    .bottom-box {
        position: fixed;
        bottom: 0;
        height: 100px;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        padding: 0 20px;
        background: rgb(63, 100, 130);
        color: white;
        font-size: 20px;
    }

    .bottom-box > div {
        flex: 1;
    }

    .bottom-box img {
        height: 20px;
        display: inline-block;
        margin-right: 10px;
    }

    .bottom span {
        display: inline-block;
    }


    .bottom-left-box {
        display: flex;
        align-items: center;
    }

    .left-icon {
        font-size: 26px;
        margin-right: 10px;
        background: #cf9236;
        padding: 5px 10px;
        border-radius: 50%;
    }

    .bottom .el-icon-circle-check {
        color: #13ce66;
    }

    .bottom .el-icon-circle-close {
        color: #f10215;
    }

    img.error {
        display: inline-block;
        transform: scale(1);
        content: '';
        color: transparent;
        min-height: 200px;
    }
    img.error::before {
        content: '';
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 100%;
        background: #f5f5f5 url(../assets/45prvdakqe.svg) no-repeat center / 50% 50%;
    }
    img.error::after {
        content: attr(alt);
        position: absolute;
        left: 0; bottom: 0;
        width: 100%;
        line-height: 2;
        background-color: rgba(0,0,0,.5);
        color: white;
        font-size: 12px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*div#imgDiv {*/
    /*    !*width: 555px;*!*/
    /*    !*height: 489px;*!*/
    /*    border: #000 solid 1px;*/
    /*    !*margin: 50px auto;*!*/
    /*    overflow: hidden;*/
    /*}*/

    .imgBox{
        position: relative;
    }
    .imgBox .img img{
        position: relative;
        max-width: 100%;
        cursor: pointer;
        transition: all 0.6s;
    }

    .imgBox .img img:hover {
        transform: scale(1.1);
    }

    .imgBox .text {
        position: absolute;
        top: 0.2;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        background: rgba(69, 65, 214, 0.09);
        opacity: 0;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }

    .imgBox a:hover .text {
        opacity: 1;
    }

</style>

